<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="店铺名称" prop="shopName">
        <el-input
          v-model="queryParams.shopName"
          placeholder="请输入店铺名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="店铺类型" prop="shopType">
        <el-select v-model="queryParams.shopType" placeholder="请选择店铺类型" clearable>
          <el-option
            v-for="dict in dict.type.tz_shop_detail_shop_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="店铺行业" prop="shopIndustry">
        <el-select v-model="queryParams.shopIndustry" placeholder="请选择店铺行业" clearable>
          <el-option
            v-for="dict in dict.type.tz_shop_detail_shop_industry"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="店铺状态" prop="shopStatus">
        <el-select v-model="queryParams.shopStatus" placeholder="请选择店铺状态" clearable>
          <el-option
            v-for="dict in dict.type.tz_shop_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['outlet:detail:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['outlet:detail:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['outlet:detail:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['outlet:detail:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="detailList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="店铺id" align="center" prop="shopId"/>
      <el-table-column label="店铺名称" align="center" prop="shopName"/>
      <el-table-column label="店铺类型" align="center" prop="shopType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.tz_shop_detail_shop_type" :value="scope.row.shopType"/>
        </template>
      </el-table-column>
      <el-table-column label="店铺简介" align="center" prop="intro"/>
      <el-table-column label="店铺公告" align="center" prop="shopNotice"/>
      <el-table-column label="店铺行业" align="center" prop="shopIndustry">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.tz_shop_detail_shop_industry" :value="scope.row.shopIndustry"/>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" prop="tel"/>
      <el-table-column label="店铺地址" align="center" prop="shopAddress"/>
      <el-table-column label="店铺logo" align="center" prop="shopLogo" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.shopLogo" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="营业时间" align="center" prop="openTime"/>
      <el-table-column label="店铺状态" align="center" prop="shopStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.tz_shop_status" :value="scope.row.shopStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="运费承担" align="center" prop="transportType"/>
      <el-table-column label="固定运费" align="center" prop="fixedFreight"/>
      <el-table-column label="满X包邮" align="center" prop="fullFreeShipping"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['outlet:detail:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['outlet:detail:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改店铺对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="店铺名称" prop="shopName">
              <el-input v-model="form.shopName" placeholder="请输入店铺名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店铺类型" prop="shopType">
              <el-select v-model="form.shopType" placeholder="请选择店铺类型">
                <el-option
                  v-for="dict in dict.type.tz_shop_detail_shop_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item label="店铺简介" prop="intro">
          <el-input type="textarea" v-model="form.intro" placeholder="请输入店铺简介"/>
        </el-form-item>
        <el-form-item label="店铺公告" prop="shopNotice">
          <el-input type="textarea" v-model="form.shopNotice" placeholder="请输入店铺公告"/>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="店铺行业" prop="shopIndustry">
              <el-select v-model="form.shopIndustry" placeholder="请选择店铺行业">
                <el-option
                  v-for="dict in dict.type.tz_shop_detail_shop_industry"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店长" prop="shopOwner">
              <el-input v-model="form.shopOwner" placeholder="请输入店长"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="店铺手机" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入店铺手机"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="tel">
              <el-input v-model="form.tel" placeholder="请输入联系电话"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="店铺地区" prop="shopAddress">
            <el-col :span="6">
              <el-select
                v-model="form.province"
                @change="choseProvince"
                placeholder="请选择所属省份">
                <el-option
                  v-for="item in provinces"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                v-model="form.city"
                @change="choseCity"
                placeholder="请选择所属城市">
                <el-option
                  v-for="item in cities"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                v-model="form.area"
                @change="choseArea"
                placeholder="请选择所属区县">
                <el-option
                  v-for="item in areas"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input v-model="form.shopAddress" placeholder="请输入店铺地址"/>
            </el-col>
          </el-form-item>
        </el-row>
        <el-form-item label="店铺logo" prop="shopLogo">
          <image-upload v-model="form.shopLogo"/>
        </el-form-item>
        <el-form-item label="店铺相册" prop="shopPhotos">
          <image-upload v-model="form.shopPhotos"/>
        </el-form-item>
        <el-form-item label="营业时间" prop="openTime">
          <el-input v-model="form.openTime" placeholder="请输入营业时间"/>
        </el-form-item>
        <el-form-item label="店铺状态" prop="shopStatus">
          <el-radio-group v-model="form.shopStatus">
            <el-radio
              v-for="dict in dict.type.tz_shop_status"
              :key="dict.value"
              :label="parseInt(dict.value)"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="固定运费" prop="fixedFreight">
              <el-input v-model="form.fixedFreight" placeholder="请输入固定运费"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="满X包邮" prop="fullFreeShipping">
              <el-input v-model="form.fullFreeShipping" placeholder="请输入满X包邮"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listDetail, getDetail, delDetail, addDetail, updateDetail} from "@/api/outlet/detail";
import {getArea, listArea} from "@/api/order/area";


export default {
  name: "Detail",
  dicts: ['tz_shop_detail_shop_type', 'tz_shop_detail_shop_industry', 'tz_shop_status'],
  data() {
    return {
      //省份集合
      provinces: [],
      //城市集合
      cities: [],
      //区县集合
      areas: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 店铺表格数据
      detailList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shopName: null,
        shopType: null,
        shopIndustry: null,
        shopStatus: null,

      },
      queryAreas: {
        parentId: 0,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
    this.loadProvinces()
  },
  methods: {
    /**
     * 获取省份信息
     */
    loadProvinces() {
      listArea(this.queryAreas).then(res => {
        const provinces = this.handleTree(res.data, "areaId", "parentId")
        this.provinces = provinces
        this.queryAreas.parentId = provinces[0].areaId
      });
    },
    /**
     * 获取城市信息
     * @param parentId
     */
    loadCities(parentId) {
      this.queryAreas.parentId = parentId;
      listArea(this.queryAreas).then(res => {
        const cities = this.handleTree(res.data, "areaId", "parentId");
        this.cities = cities
        this.queryAreas.parentId = cities[0].areaId
      })
    },
    /**
     * 获取区县信息
     * @param parentId
     */
    loadAreas(parentId) {
      this.queryAreas.parentId = parentId;
      listArea(this.queryAreas).then(res => {
        this.areas = this.handleTree(res.data, "areaId", "parentId");
      })
    },
    /**
     * 选择城市
     * @param value
     */
    choseCity(value) {
      this.form.city=this.cities.filter(o=>{
        return  o.areaId===value
      })[0].areaName
      this.form.area = "";
      this.loadAreas(value)
    },
    /**
     * 选择省份
     * @param value
     */

    choseProvince(value) {
      this.form.province= this.provinces.filter(o=>{
        return  o.areaId===value
      })[0].areaName
      this.form.city = "";
      this.form.area = "";
      this.loadCities(value)
    },
    /**
     * 选择区县
     * @param value
     */
    choseArea(value) {
      this.form.area=this.areas.filter(o=>{
        return  o.areaId===value
      })[0].areaName
      this.loadAreas(value)
    },
    /** 查询店铺列表 */
    getList() {
      this.loading = true;
      listDetail(this.queryParams).then(response => {
        this.detailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });


    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        shopId: null,
        shopName: null,
        userId: null,
        shopType: null,
        intro: null,
        shopNotice: null,
        shopIndustry: null,
        shopOwner: null,
        mobile: null,
        tel: null,
        shopLat: null,
        shopLng: null,
        shopAddress: null,
        province: null,
        city: null,
        area: null,
        pcaCode: null,
        shopLogo: null,
        shopPhotos: null,
        openTime: null,
        shopStatus: null,
        transportType: null,
        fixedFreight: null,
        fullFreeShipping: null,
        createTime: null,
        updateTime: null,
        isDistribution: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.shopId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加店铺";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const shopId = row.shopId || this.ids
      getDetail(shopId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改店铺";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.shopId != null) {
            updateDetail(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDetail(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const shopIds = row.shopId || this.ids;
      this.$modal.confirm('是否确认删除店铺编号为"' + shopIds + '"的数据项？').then(function () {
        return delDetail(shopIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('outlet/detail/export', {
        ...this.queryParams
      }, `detail_${new Date().getTime()}.xlsx`)
    },

  }
};
</script>
